import RiskCard from '@/components/RiskCard';
import { CACHE_KEY, DATA_FORMAT, getCache, setCacheByKey } from '@/utils';
import { PageContainer } from '@ant-design/pro-components';
import { Button, Card, Col, Input, Modal, Row, Table, Tag, Typography, notification } from 'antd';
import dayjs from 'dayjs';
import React, { useState } from 'react';

const Admin: React.FC = () => {
  const [data, setData] = useState(getCache(CACHE_KEY.PRISION_LIST));
  const [editRow, setEditRow] = useState(null);
  const [riskOpen, setriskOpen] = useState(false);
  const [arrangOpen, setArrangOpen] = useState(false);
  const [arrangInfo, setArrangInfo] = useState({});

  const columns = [
    {
      title: '编号',
      width: 60,
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '姓名',
      width: 100,
      dataIndex: 'name',
      key: 'name',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '位置',
      dataIndex: 'position',
      key: 'position',
    },
    {
      title: '犯罪类型',
      dataIndex: 'prisonType',
      key: 'prisonType',
    },
    {
      title: '案件进度',
      dataIndex: 'rate',
      key: 'rate',
      render: (_) => _ || '未知',
    },
    {
      title: '入所时间',
      dataIndex: 'enterTime',
      key: 'enterTime',
    },
    {
      title: '身体状态',
      dataIndex: 'healthy',
      key: 'healthy',
      render: (_) => _ || '暂无异常',
    },

    {
      title: '当前状态',
      dataIndex: 'status',
      key: 'status',
      render: (_) => {
        if (_ == '待出房') return <Tag color="blue">待出房</Tag>;
        if (_ == '出房中') return <Tag color="blue">出房中</Tag>;

        return <Tag>在押</Tag>;
      },
      options: [
        { label: '在押', value: '在押' },
        { label: '出房中', value: '出房中' },
        { label: '待出房', value: '待出房' },
      ],
    },
    {
      title: '操作',
      key: 'action',
      width: 200,
      render: (_, record) => (
        <Row gutter={[10, 10]}>
          <Col>
            <Button
              type="primary"
              onClick={() => {
                setEditRow(record);
                setriskOpen(true);
              }}
            >
              详情
            </Button>
          </Col>
          <Col>
            <Button type="primary">编辑</Button>
          </Col>
          <Col>
            <Button
              type="primary"
              onClick={() => {
                setArrangOpen(true);
                setArrangInfo(record);
              }}
            >
              分派会议室
            </Button>
          </Col>

          {/* <Col>
            <a>会见审核</a>
          </Col>
          <Col>
            <a>分派会见室</a>
          </Col>
          <Col>
            <a>会见结束</a>
          </Col> */}
        </Row>
      ),
    },
  ];

  const assignMeetingRoom = (meetingRoom) => {
    const vals = { ...arrangInfo, meetingRoom };
    console.log('[vals]', vals);
    notification.warning({
      duration: null,
      message: `${dayjs().format(DATA_FORMAT)}：从${vals.position}仓带${vals.name}人到${
        vals.meetingRoom
      }`,
    });
    const name = arrangInfo.name;

    setCacheByKey(CACHE_KEY.MEETING_LIST, (item) => item.prisoner === name, {
      status: '待出房',
    });

    const nData = setCacheByKey(CACHE_KEY.PRISION_LIST, (item) => item.name === name, {
      status: '待出房',
    });
    setData(nData);

    setArrangOpen(false);
  };

  React.useEffect(() => {
    if (editRow) {
      const nRow = data?.find((item) => item.name === editRow.name);
      setEditRow(nRow);
    }
  }, [data]);

  return (
    <PageContainer>
      <Modal
        open={riskOpen}
        width={'90%'}
        closable
        footer={null}
        title="详情查看"
        onCancel={() => setriskOpen(false)}
      >
        <RiskCard data={editRow} setList={setData}></RiskCard>
      </Modal>

      <Modal
        open={arrangOpen}
        title="分派会议室"
        footer={null}
        onCancel={() => setArrangOpen(false)}
      >
        <Row gutter={[20, 20]} className="mt20 pad20">
          <Col span={6}>
            <Button
              type="primary"
              size="large"
              onClick={() => {
                assignMeetingRoom('会议室A');
              }}
            >
              会议室A
            </Button>
          </Col>
          <Col span={6}>
            <Button
              type="primary"
              size="large"
              onClick={() => {
                assignMeetingRoom('会议室B');
              }}
            >
              会议室B
            </Button>
          </Col>
          <Col span={6}>
            <Button
              type="primary"
              size="large"
              onClick={() => {
                assignMeetingRoom('会议室C');
              }}
            >
              会议室C
            </Button>
          </Col>
          <Col span={6}>
            <Button
              type="primary"
              size="large"
              onClick={() => {
                assignMeetingRoom('会议室D');
              }}
            >
              会议室D
            </Button>
          </Col>
        </Row>
      </Modal>

      <Card>
        {/* <Row className="mb10">
          <Button type="primary">新增</Button>
        </Row> */}
        <div className="flex-aic">
          <Input placeholder="请输入姓名" style={{ width: 200 }}></Input>
          <Input placeholder="请输入证件号" style={{ width: 200 }} className="ml10"></Input>
          <Input placeholder="请输入监室" style={{ width: 200 }} className="ml10"></Input>
        </div>

        <div className="flex-bt mb10">
          <div></div>
          <Button type="primary">搜索</Button>
        </div>
        <Typography.Title level={2} style={{ textAlign: 'center' }}>
          <Table columns={columns} dataSource={data}></Table>
        </Typography.Title>
      </Card>
    </PageContainer>
  );
};

export default Admin;
